<template>
    <div style="width: 100%;height: 100%;padding-top: 10px;">
        <div id="main" style="width: 60%;height:100%;"></div>
        <div style="display: flex;flex-direction: column;position: relative;
        left: 60%;top: -100%;font-size: 15px;padding-right: 5px;
        box-sizing: border-box;width: 130px;">
            <div>在线状态:</div>
            <div style="padding: 10px;border: 1px solid blue;margin-top: 10px;">出勤人数：167</div>
            <div style="padding: 10px;border: 1px solid blue;margin-top: 10px;margin-bottom: 10px;">总人数：179</div>
            <div style="padding: 10px;border: 1px solid blue;">出勤率：93%</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';

// 基于准备好的dom，初始化echarts实例
var option = {
    title: {
        text: '劳务信息：',
    },

    legend: {
        orient: 'vertical',
        left: 10,
        // top: 20,
        bottom: 20,
        data: ['出勤人数', '缺勤人数'],
        icon: 'circle'
    },
    series: [
        {
            type: 'pie',
            data: [
                {
                    value: 167,
                    name: '出勤人数'
                },
                {
                    value: 12,
                    name: '缺勤人数'
                },
            ],
            radius: ['40%', '70%'],

        }
    ]
};
onMounted(() => {
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption(option);
});
</script>